<template>
  <div
    class="hv-designer-canvas-comp-node"
    :style="componentStyle(compData)"
    :title="compData.label"
    @contextmenu.prevent.stop
  >
    <div class="hv-designer-canvas-comp-node-menu">
      <a-dropdown :trigger="['click']" @contextmenu.prevent.stop>
        <div>
          <hv-dynamic-icon iconName="MenuOutlined" />
        </div>
        <template #overlay>
          <a-menu @click="contextmenuClick($event, compData)">
            <a-menu-item key="property">
              <hv-dynamic-icon :iconName="'EditOutlined'" /> 编辑属性
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </div>

    <component
      :is="compData.name"
      :compData="compData"
      v-if="compData.layerType === layerTreeNodeType.layer"
    />
    <template v-if="compData.layerType === layerTreeNodeType.group && compData.children">
      <hv-draggable-resizable
        v-for="comp in compData.children"
        :key="comp.id"
        v-model:x="comp.componentPosition.left"
        v-model:y="comp.componentPosition.top"
        v-model:w="comp.componentDimensions.width"
        v-model:h="comp.componentDimensions.height"
        :initW="comp.componentDimensions.width"
        :initH="comp.componentDimensions.height"
        :draggable="false"
        :style="componentContainerStyle(comp)"
      >
        <DesignerCanvasPanelCompNode :compData="comp" />
      </hv-draggable-resizable>
    </template>
  </div>
</template>

<script lang="ts">
import { layerPanelConfig, visualComponents, visualStyleGenerator } from "@/visual/configs/dashboard-conifg";
import DashboardEvent from "@/visual/events/dashboard-event";
import type DashboardComponentType from "@/visual/commons/types/dashboard-component-type";
import { defineComponent, type PropType, ref } from "vue";
import { DraggableContainer, DraggableResizable } from "../../draggable-resizable";



export default defineComponent({
  name: "DesignerCanvasPanelCompNode",
  components: {
    hvDraggableContainer: DraggableContainer,
    hvDraggableResizable: DraggableResizable,
    ...visualComponents,
  },
  props: {
    compData: {
      type: Object as PropType<DashboardComponentType<any>>,
      required: true,
      defult: () => {},
    },
  },
  setup() {
    //图层类型
    const layerTreeNodeType = ref<any>(layerPanelConfig.layerTreeNodeType);

    /**
     * 组件样式
     */
    const componentStyle = (comp: DashboardComponentType<any>) => {
      return visualStyleGenerator[
        comp.componentStyleGeneratorName
      ].componentStyleGenerator(comp);
    };

    /**
     * 组件容器样式
     */
    const componentContainerStyle = (comp: DashboardComponentType<any>) => {
      return visualStyleGenerator[
        comp.componentStyleGeneratorName
      ].containerStyleGenerator(comp);
    };

    /**
     * 跳到属性配置
     */
    const toProperty = (comp: any) => {
      const success = () => {
        const timeout = setTimeout(() => {
          clearTimeout(timeout);
          DashboardEvent.getConfigPanelCurrentPropEvent().next({
            comp,
          });
        }, 100);
      };

      DashboardEvent.getConfigPanelTabTaggleEvent().next({
        name: "propPanel",
        success,
      });
    };

    /**
     * 组件右键菜单
     */
    const contextmenuClick = ({ key }, comp: any) => {
      switch (key) {
        case "property":
          toProperty(comp);
          break;
      }
    };

    return {
      layerTreeNodeType,
      componentStyle,
      componentContainerStyle,
      contextmenuClick,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./DesignerCanvasPanelCompNode.less";
</style>
